<template>
	<div class="goods-info" @click="$router.push('/goods-detail?gid=' + item.gid)">
		<!-- 商品图片 -->
		<div class="top">
			<img v-lazy="item.pic" alt="" />
			<div class="mask" v-if="item.dyVideoUrl">
				<van-icon name="play-circle" @click.stop="videoPlay" />
			</div>
		</div>

		<!-- 商品底部详细信息 -->
		<div class="bom">
			<p class="title">{{ item.title }}</p>
			<p class="price">
				¥{{ item.endPrice | Fixed(2) }}<span>¥{{ item.price | Fixed(2) }}</span>
			</p>
			<p class="sales">销量{{ item.sale | formatMyriadNum }}</p>
			<div class="coupon">
				<p class="coupon-comm money">
					{{ item.couponMoney }}元券
					<span class="space left"></span>
					<span class="space right"></span>
				</p>
				<p class="coupon-comm bonus">
					补贴{{ item.allowanceMoney | Fixed(2) }}元
					<span class="space left"></span>
					<span class="space right"></span>
				</p>
			</div>
			<i class="iconfont icon-fenxiang share" @click.stop="toShare()"></i>
		</div>

		<!--视频弹窗播放组件-->
		<video-dig ref="videoDig"></video-dig>
		<authorize-dig ref="authorizeDig"></authorize-dig>
	</div>
</template>

<script>
import VideoDig from './VideoDig';
import { AuthorizeDig } from '@/components';
import { mapGetters } from 'vuex';
export default {
	components: {
		VideoDig,
		AuthorizeDig
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	activated() {
		this.$refs.videoDig.close();
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	methods: {
		// 启动视频播放
		videoPlay() {
			this.$refs.videoDig.open(this.item);
		},
		toShare() {
			if (this.userInfo.tbStatus === 1) {
				let params = {
					title: this.item.title,
					itemId: this.item.gid
				};
				this.$service.shopping.taobao.privilege(params).then(() => {
					this.$router.push({
						path: '/goods-share',
						query: {
							gid: this.item.gid
						}
					});
				});
			} else {
				if (this.userInfo.tbStatus === 2) {
					this.$toast('亲亲，您的淘宝账号需补充支付宝实名认证信息，请先去认证哦！');
				}
				if (this.userInfo.tbStatus === 3) {
					this.$toast('授权过期，请重新授权');
				}
				this.$refs.authorizeDig.open('/index');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-info {
	.top {
		width: 100%;
		height: 351px;
		position: relative;
		img {
			max-width: 100%;
			max-height: 100%;
		}
		.mask {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			@include flexBox(center, center);
			i {
				opacity: 0.8;
				font-size: 80px;
				transition: 0.3s;
				border-radius: 50px;
				background: $color-white;
				&:hover,
				&:focus,
				&:active {
					opacity: 0.7;
					margin-top: -20px;
				}
			}
		}
	}
	.bom {
		position: relative;
		padding: 6px 17px 30px 17px;
		.title {
			font-size: $font26;
			color: #3a3a3a;
			@include ellipsis(2);
		}
		.price {
			color: $main-color;
			font-size: $font28;
			margin-top: 5px;
			span {
				margin-left: 10px;
				color: #c3c3c3;
				font-size: $font20;
				text-decoration: line-through;
			}
		}
		.sales {
			font-size: $font24;
			color: #aaa6a6;
			margin-bottom: 10px;
		}
		.coupon {
			font-size: $font20;
			.coupon-comm {
				position: relative;
				padding: 0 18px;
				background-color: $main-color;
				color: white;
				display: inline-block;
				border-radius: 4px;
				.space {
					width: 10px;
					height: 10px;
					border-radius: 50%;
					background-color: white;
					position: absolute;
					top: 12px;
				}
				.left {
					left: -5px;
				}
				.right {
					right: -5px;
				}
			}
			.money {
				margin-right: 20px;
			}
			.bonus {
				background-color: #ffeed1;
				color: #925114;
			}
		}
		.share {
			position: absolute;
			bottom: 22px;
			right: 18px;
			font-size: 30px;
		}
	}
}
</style>
